<template>
	<view class="content">
		<u-sticky bgColor="#fff">
			<u-tabs :list="list" :is-scroll="false" style="" :current="current" @change="change"></u-tabs>
		</u-sticky>
		<view v-for="(item,index) in jobDetailsArr" :key="index">
			<u-card :title="item.title" padding="30" margin="26rpx" :sub-title="item.startTime">

				<view class="" slot="body">
					<view class="u-body-item-title u-line-2" style="white-space: break-spaces">{{item.content}}</view>
				</view>
				<view slot="foot" style="display: flex;align-items: center;justify-content: space-between;">
					<view v-show="item.isAnnounce==1">
						<u-tag text="已发布" />
					</view>
					<view v-show="item.isAnnounce==0">
						<u-tag text="未发布" type="warning" />
					</view>
					<view style="position: absolute;margin-left: 100px;" v-show="item.isAnnounce==0">班级：{{
              item.className
            }}
					</view>
					<view style="position: absolute;right:10px;" v-show="item.isAnnounce==1">班级：{{ item.className }}
					</view>
					<view>
						<button class="mini-btn" type="primary" size="mini" v-show="item.isAnnounce==0"
							@click="publishJob(item)">发布
						</button>
						<!-- <button class="mini-btn" type="default" size="mini" v-show="item.isAnnounce==0" @click="editJob(item)">编辑</button> -->
						<button class="mini-btn" type="warn" size="mini" @click="delJob(item.id)"
							v-show="item.isAnnounce==0">删除
						</button>
					</view>
				</view>
			</u-card>

		</view>
		<u-modal v-model="show" @confirm="confirm" show-cancel-button :content="content"
			:mask-close-able="true"></u-modal>
	</view>
</template>

<script>
	import {
		getWorkInfoList,
		delWorkJob,
		editWorkJob
	} from '@/api/jz/class/class.js';

	export default {
		data() {
			return {
				content: "确认要删除吗？",
				list: [{
					name: '全部作业'
				}, {
					name: '已发布'
				}, {
					name: '未发布',
				}],
				current: 0,
				swiperCurrent: 0,
				isAnnounce: null, //0 保存 ； 1 保存并发布
				jobDetailsArr: [], //作业详情
				show: false,
				selId: null
			}
		},
		mounted() {
			this.change(0)
		},
		methods: {
			getNowDate() {
				var myDate = new Date;
				var year = myDate.getFullYear(); //获取当前年
				var mon = myDate.getMonth() + 1; //获取当前月
				var date = myDate.getDate(); //获取当前日
				var hours = myDate.getHours(); //获取当前小时
				var minutes = myDate.getMinutes(); //获取当前分钟
				var seconds = myDate.getSeconds(); //获取当前秒
				var now = year + "-" + mon + "-" + date + " " + hours + ":" + minutes + ":" + seconds;
				return now;
			},
			publishJob(row) {
				const data = {
					id: row.id,
					isAnnounce: 1,
					startTime: this.getNowDate(),
				}
				editWorkJob(data).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: `发布成功`
						})
						this.change(this.current)
					}
				}).catch((err) => {
					console.error(err);
				});
			},

			editJob(row) {
				uni.navigateTo({
					url: '/pages/work/workInfo/publishJob?worksObj=' + encodeURIComponent(JSON.stringify(row))
				})
			},
			confirm() {
				let data = {
					id: this.selId,
					delFlag: 1
				}
				editWorkJob(data).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: `删除成功`
						})
						this.change(this.current)
					}
				}).catch((err) => {
					console.error(err);
				});
			},
			delJob(id) {
				this.selId = id;
				this.show = true;
			},
			change(index) {
				this.current = index;
				switch (index) {
					case 0:
						this.isAnnounce = null
						break;
					case 1:
						this.isAnnounce = 1
						break;
					case 2:
						this.isAnnounce = 0
						break;
				}

				getWorkInfoList({
					isAnnounce: this.isAnnounce
				}).then((res) => {
					if (res.code == 200) {
						this.jobDetailsArr = res.rows

					}
				}).catch((err) => {
					console.error(err);
				});

			},
		},
		onLoad: function() {}
	}
</script>

<style scoped>
	page {
		height: 100%;
		background-color: #f2f2f2;
	}
</style>
<style scoped lang="scss">
	.mini-btn {
		margin-left: 5px;
	}

	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32 rpx;
		color: #333;
		padding: 20 rpx 10 rpx;
	}

	.u-body-item image {
		width: 120 rpx;
		flex: 0 0 120 rpx;
		height: 120 rpx;
		border-radius: 8 rpx;
		margin-left: 12 rpx;
	}

	.u-line-2,
	.u-line-3,
	.u-line-4,
	.u-line-5 {
		display: unset !important;
	}
</style>